import { useEffect } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Checkbox, Select, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './InfoPage.css';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: { span: 3 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 3,
    },
  },
};

const InfoPage = ({ dispatch, userid, username, phone, group }) => {

  const [form] = Form.useForm();

  useEffect(() => {
    dispatch({
      type: 'users/getUserInfo'
    })
  })

  const onFinish = (value) => {
    console.log(value);
    dispatch({
      type: 'users/updateUserInfo',
      payload: value
    })
  };

  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select
        style={{ width: 70 }}>
        <Option value="86">+86</Option>
      </Select>
    </Form.Item>
  );

  return (
    <Form
      {...formItemLayout}
      form={form}
      name="userinfo"
      onFinish={onFinish}
      initialValues={{
        prefix: '86',
      }}
      scrollToFirstError>

      <Form.Item
        name="userid"
        label="工号">
        <Input disabled={true} placeholder={userid} style={{ width: 300  }}/>
      </Form.Item>

      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            message: '用户名不能为空!',
          },
        ]}>
        <Input placeholder={username} style={{ width: 300  }}/>
      </Form.Item>

      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: '密码不能为空!',
          },
        ]}
        hasFeedback>
        <Input.Password style={{ width: 300  }}/>
      </Form.Item>

      <Form.Item
        name="confirm"
        label="重复密码"
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: '密码不能为空!',
          },
          ({ getFieldValue }) => ({
            validator(rule, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject('两次密码输入不相同!');
            },
          }),
        ]}>
        <Input.Password style={{ width: 300  }}/>
      </Form.Item>

      <Form.Item
        name="phone"
        label="电话号码">
        <Input
          addonBefore={prefixSelector}
          style={{ width: 300  }}
          placeholder={phone}/>
      </Form.Item>

      <Form.Item
        name="group"
        label="组别">
        <Select defaultValue={group} style={{ width: 300  }}>
          <Option value="0">技术组</Option>
          <Option value="1">一组</Option>
          <Option value="2">二组</Option>
          <Option value="3">三组</Option>
          <Option value="4">四组</Option>
          <Option value="5">五组</Option>
          <Option value="6">六组</Option>
        </Select>
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          重新提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default connect(state => {
  const { userid, username, phone, group } = state.users;
  return {
    userid,
    username,
    phone,
    group
  }
})(InfoPage);
